<template>
  <div class="cate">
    <!-- 头部导航栏部分： -->
    <div class="cate_top">
      <p>
        <router-link to="/NaviGation/HomePage" class="link1">首页</router-link>
        <i class="el-icon-arrow-right"></i>
        <router-link
          to="/NaviGation/CateGory"
          class="link1"
          @click="onJeepTwo()"
          >{{ tabListTwo }}</router-link
        >
        <i class="el-icon-arrow-right"></i>
        <span class="tabname">{{ tabListOne }}</span>
      </p>
    </div>

    <!-- 商品规格选择部分： -->
    <div class="cate_menu">
      <div class="logo" v-for="(item, index) in tabChange" :key="item.id">
        <div class="logo_header">{{ item.name }}:</div>
        <span
          class="logo_all"
          style="color: #27ba9b"
          @click="onTab(index, ind)"
          :class="{ cur: sel[index] == ind }"
          >全部</span
        >
        <div class="logo_cont" v-for="(a, ind) in item.properties" :key="a.id">
          <p @click="onTab(index, ind)" :class="{ cur: sel[index] == ind }">
            {{ a.name }}
          </p>
        </div>
      </div>
      <div class="logo_body"></div>
    </div>

    <div class="cate_middle">
      <div class="middle_top">
        <div class="middle_left">
          <div
            class="cartCont1"
            @click="curId = 0"
            :class="{ firstActive: curId === 0 }"
          >
            默认排序
          </div>
          <div
            class="cartCont1"
            @click="curId = 1"
            :class="{ firstActive: curId === 1 }"
          >
            最新商品
          </div>
          <div
            class="cartCont1"
            @click="curId = 2"
            :class="{ firstActive: curId === 2 }"
          >
            最高人气
          </div>
          <div
            class="cartCont1"
            @click="curId = 3"
            :class="{ firstActive: curId === 3 }"
          >
            评论最多
          </div>
          <div class="cartCont1">
            价格排序
            <p class="cz">
              <i
                class="el-icon-caret-top"
                @click="priveUp((curId1 = 0))"
                :class="{ icon_active: curId1 === 0 }"
              ></i>
              <i
                class="el-icon-caret-bottom"
                @click="priveDtm((curId1 = 1))"
                :class="{ icon_active: curId1 === 1 }"
              ></i>
            </p>
          </div>
         
        </div>
        <div class="middle_right">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="仅显示有货商品"></el-checkbox>
              <el-checkbox label="仅显示特惠商品"></el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 图片主体部分 -->
       
      </div>
       <div class="cateContent">
          <div
            class="grid-content bg-purple bodycont"
            v-for="item in contImg"
            :key="item.id"
            @click="onJeepThree(item.id)"
          >
            <el-image :key="item.id" :src="item.picture" lazy></el-image>
            <p class="name">{{ item.name }}</p>
            <p class="desc">{{ item.desc }}</p>
            <p class="price">{{ item.price }}</p>
          </div>

          <div class="lodingBox">
            <span class="loding_icon"></span>
            <span class="loding_text">正在加载...</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import { ThreeCate, Content } from "@/api/user";
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "CateSub",
  data() {
    return {
      //三级导航商品：
      tabListOne: "",
      //二级导航商品：
      tabListTwo: "",
      //导航选择：
      tabChange: [],
      //复选框：
      checkList: ["选中且禁用", "复选框 A"],
      //图片列表：
      contImg: [],
      //用于存储选择规格的数组
      sel: [],
      curId: 0,
      curId1: 0,
      // 导航变量：
      insTab1: 0,
      //图片懒加载参数：
      pageNumber: 20,
      //判断数据
      sort: true,
      ind: 0,
    };
  },
  created() {
    //获取导航数据：
    let res = this.$route.query.id;
    ThreeCate(res).then((val) => {
      //  console.log(val.data.result);
      //三级导航
      this.tabListOne = val.data.result.name;
      //二级导航
      this.tabListTwo = val.data.result.parentName;
      //导航规格
      this.tabChange = val.data.result.saleProperties;
      // console.log(this.tabChange);
    });

    //获取图片数据：
    this.getLisData();

    Content(this.pageNumber).then((val) => {
      // console.log(val.data.result.items);
      this.contImg = val.data.result.items;
      // console.log(this.pageNumber);
    });
  },
  methods: {
    //切换导航规格：
    onTab(index, ind) {
      // console.log();
      this.sel[index] = ind;
      // console.log(this.sel[index]);
      this.$set(this.sel, index, ind);
      this.getLisData();
    },
    // 导航标签切换样式
    onTabChange1(index) {
      this.insTab1 = index;
    },

    //价格升序
    priveUp() {
      this.sort = !this.sort;
      if (this.sort) {
        this.contImg.sort((a, b) => {
          return a.price - b.price; //根据价格
        });
      } else {
        this.contImg.sort((a, b) => {
          return b.price - a.price;
        });
      }
    },

    //价格降序
    priveDtm() {
      this.sort = !this.sort;
      if (this.sort) {
        this.contImg.sort((a, b) => {
          return b.price - a.price;
        });
      } else {
        this.contImg.sort((a, b) => {
          return a.price - b.price;
        });
      }
    },

    //封装获取图片主体数据：
    getLisData() {
      Content(this.pageNumber).then((val) => {
        this.contImg = val.data.result.items;
      });
    },
    // 封装到底部加载更多：
    pageScroll() {
      // 获取滚动的距离
      let scrollTop = document.documentElement.scrollTop;
      // 获取滚动的高度（获取整个html的高度）
      let scrollHeight = document.documentElement.scrollHeight;
      // 获取屏幕(浏览器)高度
      let clienHeight = document.documentElement.clientHeight;
      // 滚动的距离 + 屏幕高度 - 内容高度 >= 0 表示滚动到底部了      (下拉加载判断条件)
      if (scrollTop + clienHeight - scrollHeight >= 0) {
        setTimeout(() => {
          this.pageNumber += 20;
          // console.log(this.pageNumber);
          //滚动至底部后请求数据
          this.getLisData();
        }, 200);
      }
    },

    //点击跳转详情页
    onJeepThree(pid) {
      let res = this.$route.query.id;
      console.log(res);
      this.$router.push({
        path: "/NaviGation/PartiCulars",
        query: { id: pid },
      });
    },
    //跳转二级：
    onJeepTwo() {},
  },

  mounted() {
    window.onscroll = this.pageScroll;
  },
  //监听切换
  watch: {
    $route(to, from) {
      console.log(to, from);
      ThreeCate(to.query.id).then((val) => {
        //三级导航
        this.tabListOne = val.data.result.name;
        //二级导航
        this.tabListTwo = val.data.result.parentName;
        //导航规格
        this.tabChange = val.data.result.saleProperties;
      });
      //
      Content(to.query.id).then((val) => {
        this.contImg = val.data.result.items;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cate_top {
  width: 1190px;
  height: 75px;
  margin: 0 auto;
  padding: 25px 10px;
  .link1 {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    &:hover {
      color: #27ba9b;
      cursor: pointer;
    }
  }
  .tabname {
    color: #333;
    font-size: 14px;
  }
}

.cate_menu {
  .cur {
    color: #27ba9b;
  }
  width: 1190px;
  height: auto;
  background: #fff;
  margin: 0 auto;
  padding: 25px;
  font-size: 14px;
  .logo {
    color: #999;
    line-height: 40px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .logo_header {
      width: 70px;
      height: 45px;
    }
    span {
      margin-left: 20px;
    }
    .logo_cont {
      width: 80px;
      height: 50px;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #333;
      margin-right: 36px;
      transition: all 0.3s;
      display: inline-block;
      line-height: 40px;
      &:hover {
        color: #27ba9b;
        cursor: pointer;
      }
    }
    .logo_all {
      margin-right: 30px;
    }
  }
}

.cate_middle {
  width: 1190px;
  height: auto;
  background: #fff;
  margin: 25px auto;
  padding: 25px;
  color: #333;
  .cateContent {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    .lodingBox {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 200px;
      .loding_icon {
        width: 50px;
        height: 50px;
        background: url("@/assets/loding.gif") no-repeat 50% / contain;
      }
      .loding_text {
        color: #999;
        font-size: 16px;
      }
    }
  }
  .middle_top {
    height: 80px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .middle_left {
      display: flex;
      .cartCont1 {
        height: 30px;
        line-height: 30px;
        border: 1px solid #e4e4e4;
        padding: 0 20px;
        margin-right: 20px;
        border-radius: 2px;
        position: relative;
        transition: all 0.3s;
        font-size: 14px;
        .cz {
          height: 30px;
          line-height: 28px;
          padding: 0 20px;
          margin-right: 20px;
          color: #999;
          border-radius: 2px;
          position: relative;
          transition: all 0.3s;
          .el-icon-caret-top {
            position: absolute;
            top: -26px;
            left: 59px;
            border-bottom-color: #bbb;
          }
          .el-icon-caret-bottom {
            position: absolute;
            top: -19px;
            left: 59px;
            border-bottom-color: #bbb;
          }
          .icon_active {
            color: #27ba9b;
          }
        }
      }
    }
    .middle_right {
      margin-top: 10px;
    }
  }
  .card {
    width: 50px;
    margin-left: 30px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #27ba9b !important;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #27ba9b !important;
    border-color: #27ba9b !important;
  }
  .firstActive {
    background: #27ba9b;
    border-color: #27ba9b;
    color: #fff;
  }
}
.bodycont {
  width: 220px;
  padding: 20px 8px;
  text-align: center;
  transition: all 0.5s;
  text-decoration: none;
  color: #333;
  outline: none;
  &:hover {
    box-shadow: 2px 2px 10px -1px rgb(197, 197, 197);
    transform: translateY(-3px);
    cursor: pointer;
  }
  .name {
    width: 160px;
    padding-top: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 16px;
    margin: 0 auto;
    white-space: nowrap;
  }
  .desc {
    width: 160px;
    padding-top: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    margin: 0 auto;
    color: #999;
    white-space: nowrap;
  }
  .price {
    width: 160px;
    padding-top: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #cf4444;
    font-size: 20px;
    margin: 0 auto;
    white-space: nowrap;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-image {
  width: 160px;
  height: 160px;
}
</style>